<template>
  <div class="page ">
    <div class="page-item">
        <div class="page-title"> selectModel 功能验证：</div>
        <div class="page-flex">
            <label>disabled功能验证：</label>
            <ekRadio v-model="fromtest.disabled" :options="[
            {
                value: true,
                label: '启用',
            },
            {
                value: false,
                label: '禁用',
            }
            ]"
            @change="changeRadio"
            />
      </div>
       <div class="page-flex">
        <label>clearable功能验证：</label>
         <ekRadio v-model="fromtest.clearable" :options="[
           {
            value: true,
            label: '启用',
          },
          {
            value: false,
            label: '禁用',
          }
        ]" />
      </div>
      <div class="page-flex">
        <label>autoInit功能验证：</label>
         <ekRadio v-model="fromtest.autoInit" :options="[
           {
            value: true,
            label: '启用',
          },
          {
            value: false,
            label: '禁用',
          }
        ]" />
      </div>
      <div class="page-flex">
        <label>multiple功能验证：</label>
         <ekRadio v-model="fromtest.multiple" :options="[
           {
            value: true,
            label: '启用',
          },
          {
            value: false,
            label: '禁用',
          }
        ]" />
      </div>
      <div class="page-flex">
        <label>collapseTags功能验证：</label>
         <ekRadio v-model="fromtest.collapseTags" :options="[
           {
            value: true,
            label: '启用',
          },
          {
            value: false,
            label: '禁用',
          }
        ]" />
      </div>
    <div class="page-flex">
            <label>测试网络差环境下情况：</label>
            <el-button  @click="testne()" class="mt-btn">测试</el-button>
      </div>
    <div class="page-flex">
            <label>切换options数据功能验证：</label>
            <el-button  @click="testData(1)" class="mt-btn">清空数据</el-button>
            <el-button  @click="testData(2)" class="mt-btn">数据1</el-button>
            <el-button  @click="testData(3)"  class="mt-btn">数据2</el-button>
      </div>
      <div class="page-flex">
        <label>placeholder功能验证：</label>
        <ekInput v-model="fromtest.placeholder" />
      </div>
      <div class="page-flex mt-btn">
        <label>change功能验证：{{ fromtest.change }}</label>
      </div>
      <div class="page-flex mt-btn">
        <label>blur功能验证：{{ fromtest.blur }}</label>
      </div>
      <div class="page-flex mt-btn">
        <label>focus功能验证：{{ fromtest.focus }}</label>
      </div>
      <div class="page-flex mt-btn">
        <label>input功能验证：{{ fromtest.input }}</label>
      </div>
       <div class="page-flex mt-btn">
        <label>clear功能验证：{{ fromtest.clear }}</label>
      </div>
    </div>
    <div class="page-item">
        <div>
            <ekSelectModel 
                v-if="show"
                v-model="form.input" 
                :name="form.input_dim_text"
                :placeholder="fromtest.placeholder" 
                :disabled="fromtest.disabled" 
                :clearable="fromtest.clearable"
                :multiple="fromtest.multiple"
                :collapseTags="fromtest.collapseTags"
                modelCode="MODEL_DEPARTMENT"
                :mapping="{
                  value: 'id',
                  label: ['department_name'],
                }"
                @change="change"
                @blur="blur"
                @focus="focus"
                @clear="clear"
            />
        </div>
        <div class="mt-btn">
            <ekSelectModel
                v-model="form.input2" 
                :disabled="fromtest.disabled" 
                :clearable="fromtest.clearable"
                :autoInit="fromtest.autoInit"
                :multiple="fromtest.multiple"
                :collapseTags="fromtest.collapseTags"
                :options="options"
                :emptyValues="[null]"
                @change="change"
                @blur="blur"
                @focus="focus"
                @clear="clear"
            />
    
        </div>
        <!-- <formRender :form="form" :columns="columns" ref="forms"
            @change="change"
            @blur="blur"
            @focus="focus"
            @clear="clear"
        /> -->
        <el-button  @click="test" class="mt-btn">测试</el-button>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, getCurrentInstance, reactive, ref} from "vue";
import formRender from "@/components/form/formRender.vue";
import ekRadio from "@/components/form/ekRadio/index.vue";
import ekInput from "@/components/form/ekInput/index.vue";
import ekSelect from "@/components/form/ekSelect/index.vue";
import ekSelectModel from "@/components/form/ekSelectModel/index.vue";

let fromtest = ref( {
  disabled: false,
  clearable: true,
  placeholder: '',
  autoInit: false,
  collapseTags: true,
  multiple:true,
  blur: '',
  change:'',
  focus:'',
  input:'',
  clear:'',
})
let form = reactive({
  input:['0','1'],
  input2: "true,false",
  input3: "",
  input_dim_text:['gggg','dddd'],
});

let columns = ref([
  {
    type: "Select",
    column: "input3",
    label: "input3",
    disabled: false,
    clearable: false,
    placeholder:'',
    url: "/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE",
    rules: [{ required: true, message: "Input所有参数验证", trigger: "blur" }],
    mapping: {
        value: "dimension_code",
        label: ['dimension_code','dimension_name'],
    }
  },
]);
const forms = ref(null)
const test = () => {
    console.log(form)
    forms.value.validate(()=>{

    });
};

const options = ref([
    {
                value: "null",
                label: '全部',
            },
   {
                value: true,
                label: 'true',
            },
            {
                value: false,
                label: 'false',
            },
])
const testData = (type) =>{
    if(type == 2){
        options.value= [
            {
                value: true,
                label: 'true',
            },
            {
                value: false,
                label: 'false',
            },
        ]
    } else if(type ==3) {
        options.value= [
            {
                value: 1,
                label: '1',
            },
            {
                value: 2,
                label: '2',
            },
            {
                value: 3,
                label: '3',
            }
        ]
    } else {
         options.value= [];
    }
}

const changeRadio = () =>{
    columns.value[0].disabled = fromtest.value.disabled
}
// 失去焦点
const blur = (event) => {
    fromtest.value.blur = 'blur事件:' + JSON.stringify(event);
  console.log(event, 'blur')
};
// 聚焦
const focus  = (event) => {
    fromtest.value.focus = 'focus事件:' + JSON.stringify(event);
  console.log(event, 'focus')
};
// 改变事件
const change  = (event) => {
    fromtest.value.change = 'change事件:' + JSON.stringify(event);
  console.log(event, 'change')
};

// 实时改变事件
const clear = () => {
    fromtest.value.clear = 'clear事件' ;
  console.log('clear')
};

const show = ref(true);
const testne = () =>{
    show.value = false;
    setTimeout(()=>{
        show.value = true;
    }, 1000)
}
</script>

<style scoped lang="scss">
.page {
  background-color: #f4f4f4;
  display: flex;
    .page-item {
        border: 1px solid #fff;
        padding: 10px;
            margin: 10px;
            min-width: 200px;
    }
  .page-title {
    font-size: 16px;
  }
  .page-flex {
    display: flex;
    align-items: center;
  }
  .mt-btn {
    margin-top: 10px;
  }
}
</style>
